<template>
  <div class="container">
    <div>
      <div>
        <img alt="Vue logo" src="../assets/logo.png" />
      </div>

      <div class="subjectItem">
        <span>题型：</span>
        <label
          class="type-radio"
          v-for="(option, index) in questionArr"
          :key="index"
        >
          <input
            type="radio"
            name="question"
            :value="option.value"
            v-model="subjectObj.type"
            @change="questionChange"
          />
          {{ option.label }}
        </label>
      </div>
      <div class="subjectItem">
        <span>题目：</span>
        <input type="text" v-model="subjectObj.title" />
      </div>
      <button class="addBtn" @click="addQuestion">添加题目</button>
    </div>
    <div></div>
    <div
      style="margin-top: 60px"
      v-for="(item, index) in questionList"
      :key="index"
    >
      <div class="question-item">
        <div class="order">{{ index }}、</div>
        <component
          :is="item.componentName"
          :title="item.title"
          v-model="selected"
          :options="options"
          :index="index"
          @change="getChangeValue"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const questionList = ref([]);
const questionArr = ref([
  { value: "radio", label: "单选题" },
  { value: "checkbox", label: "多选题" },
  { value: "input", label: "填空题" },
]);
const subjectObj = ref({});
const Component = ref("");

const questionChange = (e) => {
  console.log(e.target.value);
  subjectObj.value.type = e.target.value;
  Component.value = e.target.value;
};

const addQuestion = async () => {
  let componentName;
  try {
    componentName = await loadComponent(subjectObj.value.type);
    questionList.value.push({
      componentName,
      title: subjectObj.value.title,
    });
  } catch (error) {
    console.error("Error loading component:", error);
  }
  subjectObj.value = {};
};

const loadComponent = async (type) => {
  let component;
  switch (type) {
    case "radio":
      component = await import("@/components/RadioComponent.vue");
      break;
    case "checkbox":
      component = await import("@/components/CheckboxComponent.vue");
      break;
    case "input":
      component = await import("@/components/InputComponent.vue");
      break;
    default:
      throw new Error("Invalid component type");
  }
  return component.default;
};

const options = [
  { value: "option1", label: "Option 1" },
  { value: "option2", label: "Option 2" },
  { value: "option3", label: "Option 3" },
];

const selected = ref("");
const getChangeValue = (event) => {
  answerArr.value[event.index] = event.value;
  console.log(answerArr.value);
};

// 选项结果集合
const answerArr = ref([]);
</script>

<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}

.subjectItem {
  padding: 12px;
}

.type-radio {
  margin-right: 12px;
}

.addBtn {
  margin-left: 20px;
}

.question-item {
  display: flex;
  align-items: flex-start;
}

.order {
  line-height: 16px;
}
</style>